<template>
  <div>{{ displayText }}</div>
</template>

<script>
// import dayjs from "dayjs";

// const currentTime = new Date().getTime();

export default {
  props: {
    time: {
      type: Number,
      default: 0,
      required: true, // 必须
    },
    // 是否自动开启倒计时
    autoStart: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      // 由于prop数据不允许修改,可以将其作为默认值创建一个组件自身的selfTime数据
      selfTime: this.time,
      // 表示是否正在计时中
      flag: false,
    };
  },

  computed: {
    displayText() {
      // return dayjs(currentTime + this.selfTime).format("HH:mm:ss");
      // 自行通过 this.selfTime 计算 小时数\分钟数\描述
      const hour = Math.floor(this.selfTime / 1000 / 60 / 60);
      const min = Math.floor(this.selfTime / 1000 / 60) % 60;
      const s = Math.floor(this.selfTime / 1000) % 60;
      return `${hour}:${min}:${s}`;
    },
  },

  methods: {
    // 开始
    start() {
      if (this.flag) return;
      this.flag = true;
      console.log("start");
      this.timer = setInterval(() => {
        this.selfTime -= 1000;
        if (this.selfTime === 0) {
          this.pause();
          // 倒计时完成,触发一个自定义事件 finish 让父组件可以去实现自己的逻辑
          this.$emit("finish");
          return;
        }
      }, 1000);
    },
    // 暂停
    pause() {
      clearInterval(this.timer);
      this.flag = false;
    },
    // 重置
    reset() {
      // 使用 time 这个 prop 重新赋值给 selfTime
      this.selfTime = this.time;
    },
  },

  mounted() {
    // 判断是否需要自动开启计时
    if (this.autoStart) {
      this.start();
    }
  },
};
</script>
